<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="供应商名称">
        <el-input v-model="queryParams.supplierName" placeholder="供应商名称"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="queryParams.supplierPhone" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="序号从">
        <el-input v-model="queryParams.supplierNumFrom" placeholder="从"></el-input>
      </el-form-item>
      <el-form-item label="到">
        <el-input v-model="queryParams.supplierNumTo" placeholder="到"></el-input>
      </el-form-item>
      <template>
        <el-radio v-model="queryParams.supplierState" label="0">关停</el-radio>
        <el-radio v-model="queryParams.supplierState" label="1">正常</el-radio>
        <el-radio v-model="queryParams.supplierState" label="2">修整</el-radio>
      </template>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="addHandler()" plain icon="el-icon-plus" size="mini">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" @click="deleteHandler()" plain icon="el-icon-delete" size="mini">删除</el-button>
      </el-col>
    </el-row>
    <br>
    <el-table :data="tableData"
              v-loading="loading"
              stripe border
              @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="goodsId" label="商品主键">
      </el-table-column>
      <el-table-column prop="coneName" label="一级分类">
      </el-table-column>
      <el-table-column prop="ctwoName" label="二级分类">
      </el-table-column>
      <el-table-column prop="cthrName" label="三级分类">
      </el-table-column>
      <el-table-column prop="brandCnName" label="品牌">
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名称">
      </el-table-column>
      <el-table-column prop="goodsCode" label="商品代号">
      </el-table-column>
      <el-table-column prop="goodsInTime" :formatter="formatDate" label="录入时间">
      </el-table-column>
      <el-table-column prop="goodsInfo" :formatter="formatStr" label="详细说明">
      </el-table-column>
      <el-table-column prop="modifiedTime" :formatter="formatDate" label="修改时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="editHandler(scope.row.goodsId)">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteHandler(scope.row.goodsId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="50%"
    >
      <el-form ref="form"  :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="一级分类" prop="coneId">
              <el-select v-model="form.coneId" clearable placeholder="请选择">
                <el-option
                  v-for="item in oneList"
                  :key="item.coneId"
                  :label="item.coneName"
                  :value="item.coneId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级分类" prop="ctwoId">
              <el-select v-model="form.ctwoId" placeholder="请选择">
                <el-option
                  v-for="item in twoList"
                  :key="item.ctwoId"
                  :label="item.ctwoName"
                  :value="item.ctwoId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="三级分类" prop="cthrId">
          <el-select v-model="form.cthrId"  clearable placeholder="请选择">
            <el-option
              v-for="item in threeList"
              :key="item.cthrId"
              :label="item.cthrName"
              :value="item.cthrId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" prop="brdId">
          <el-select v-model="form.brdId" clearable placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.brandId"
              :label="item.brandCnName"
              :value="item.brandId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="form.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品代号" prop="goodsCode">
          <el-input v-model="form.goodsCode"></el-input>
        </el-form-item>
        <el-form-item label="录入时间" prop="goodsInTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.goodsInTime"
                            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="详细说明" prop="goodsInfo">
          <el-input type="textarea" v-model="form.goodsInfo"></el-input>
        </el-form-item>

        <el-form-item label="成立时间" prop="modifiedTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.modifiedTime"
                            style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">保 存</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import {
  listGoodsSpuInfo,
  listOne,
  listTwo,
  listThree,
  getGoodsSpuInfo,
  listBrand,
  updateGoodsSpuInfo, addGoodsSpuInfo, delGoodsSpuInfos
} from "@/api/webshop/GoodsSpuInfo345";

export default {

  name: "Test"
  , data() {
    return {
      title: "",
      tableData: [],
      oneList: [],
      twoList: [],
      threeList: [],
      brandList: [],
      oneFullList: [],
      twoFullList: [],
      threeFullList: [],
      brandFullList: [],
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

      loading: false,
      total: 0,
      dialogVisible: false,
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierName: "",
        supplierNumFrom: null,
        supplierNumTo: null,
        supplierPhone: "",
        supplierState: null
      },
      form: {
        goodsId: null,
        coneId: null,
        ctwoId: null,
        cthrId: "",
        brdId: null,
        goodsName: "",
        goodsCode: null,
        goodsInTime: null,
        goodsInfo: null,
        modifiedTime: null
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  watch: {
    'form.coneId':{
      handler(val){
        console.log("coneId:",val)
        if(val != null){
          this.twoList = this.twoFullList.filter(two => two.coneId == val)
          //this.threeList = this.threeFullList.filter(three => three.coneId == val)
        }else{
          this.twoList= this.twoFullList
        }
        // console.log("val=",val)
        this.form.ctwoId = null
      }
    }
  },
  created() {
    this.getList()
    this.getOneList()
    this.getTwoList()
    this.getThreeList()
    this.getBrandList()
  },
  methods: {
    formatStr(r, c, v, i) {
      return v.length > 10 ? v.substring(0, 10) + "..." : v
    },
    resetFrom() {
      this.form = {}
    },
    addHandler() {
      this.resetFrom()
      this.title = "添加信息"
      this.dialogVisible = true
    },
    query() {
      this.getList()
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    formatDate(row, column, cellValue, index) {
      console.log(row, column, cellValue, index345)
      let date = new Date(cellValue);
      let o = {
        'y': date.getFullYear(),
        'm': (date.getMonth() + 1).toString().padStart(2, '0'),
        'd': date.getDate().toString().padStart(2, '0'),
        'h': date.getHours().toString().padStart(2, '0'),
        'i': date.getMinutes().toString().padStart(2, '0'),
        's': date.getSeconds().toString().padStart(2, '0')
      };
      return o.y + "-" + o.m + "-" + o.d;
    },
    getList() {
      this.loading = true
      listGoodsSpuInfo(this.queryParams).then(resp => {
        this.tableData = resp.rows
        this.loading = false
        this.total = resp.total
      })
    }, getOneList() {
      listOne().then(resp => {
        this.oneFullList = resp.data
        this.oneList=this.oneFullList
        console.log(this.oneList)
      })
    }, getTwoList() {
      listTwo().then(resp => {
        console.log(
          "twoFullList=",
          resp.data
        )
        this.twoFullList = resp.data
        // this.twoList=this.twoFullList
        // console.log(this.twoList)
      })
    }, getThreeList() {
      listThree().then(resp => {
        this.threeFullList = resp.data
        this.threeList=this.threeFullList
        console.log(this.threeList)
      })
    }, getBrandList() {
      listBrand().then(resp => {
        this.brandFullList = resp.data
        this.brandList=this.brandFullList
        console.log(this.brandList)
      })
    },
    handleClick() {
      alert('button click');
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //alert('submit!');

          this.loading = true

          if (this.form.goodsId) {
            updateGoodsSpuInfo(this.form).then(resp => {
              if (resp.code == 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.getList()
                this.dialogVisible = false
              } else {
                this.$message({
                  message: '保存失败',
                  type: 'warning'
                });
              }
            })
          } else {
            addGoodsSpuInfo(this.form).then(resp => {
              if (resp.code == 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.getList()
                this.dialogVisible = false
              } else {
                this.$message({
                  message: '保存失败',
                  type: 'warning'
                });
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editHandler(id) {

      console.log(id)
      getGoodsSpuInfo(id).then(resp => {
        this.form = resp.data
        this.title = "修改信息"
        this.dialogVisible = true

      })
    },
    deleteHandler(id) {
      console.log(id)
      let idss = id || this.ids.join(",")
      delGoodsSpuInfos(idss).then(resp => {
        console.log(resp)
        if (resp.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '删除失败',
            type: 'warning'
          });
        }
        this.getList()
      }).catch(err => {
        console.log(err)
        this.$message.error('删除异常');
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.ids = val.map(item => item.goodsId)
      console.log(this.ids)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
